<template>
	<!-- Main content -->
	<section class='content'>
		<div class="box box-default">
			<div class="box-header with-border form-horizontal">
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">姓名</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="姓名">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">身份证号</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="身份证号">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">手机</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="手机">
							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">邮箱</label>
							<div class="col-md-8">
								<input class="form-control" placeholder="邮箱">
							</div>
						</div>
					</div>

				</div>
				<div class="row">
					<div class="col-md-3">
						<div class="form-group">
							<label class="col-md-4 control-label">评分等级</label>
							<div class="col-md-8 checkbox">
								<label>
									<input type="checkbox">A
								</label>
								<label>
									<input type="checkbox">B
								</label>
								<label>
									<input type="checkbox">C
								</label>
								<label>
									<input type="checkbox">D
								</label>
								<label>
									<input type="checkbox">E
								</label>
							</div>
						</div>
					</div>

				</div>
				<div class="text-right">
					<button class="btn btn-default search_btn">搜索</button>
				</div>
			</div>

			<div class="box-body">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>用户ID</th>
							<th>姓名</th>
							<th>身份证号</th>
							<th>手机号</th>
							<!--<th>邮箱</th>-->
							<!--<th>评分等级</th>-->
							<th>查看</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="user in fUsers">
							<td>{{user['id']}}</td>
							<td>{{user['username']}}</td>
							<td>{{user['idNumber']}}</td>
							<td>{{user['phone']}}</td>
							<!--<td>{{user['id']}}</td>-->
							<!--<td>{{user['mark']}}</td>-->
							<td><a @click="check(user)">查看</a></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="box-footer">
			</div>
		</div>
		<div class="layer_custom_container layer_check_container" style="display:none">
			<div class="box box-primary">
				<div class="box-header with-border">
					<h3 class="box-title">基本信息</h3>
				</div>
				<div class="box-body">
					<div class="row">
						<div class="col-xs-4">
							<label>申请人：</label>
							<span>{{cUser['username']}}</span>
						</div>
						<div class="col-xs-4">
							<label>身份证：</label>
							<span>{{cUser['idNumber']}}</span>
						</div>
						<div class="col-xs-4">
							<label>手机号：</label>
							<span>{{cUser['phone']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>自拍照：</label>
							<span><img :src="cUser['myImageUrl']" width="120" height="90"></span>
						</div>
						<div class="col-xs-4">
							<label>身份证正面：</label>
							<span><img :src="cUser['idPositiveImage']"  width="120" height="90"></span>
						</div>
						<div class="col-xs-4">
							<label>身份证反面：</label>
							<span><img :src="cUser['idPositiveImage']" width="120" height="90"></span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>评级结果：</label>
							<span>{{cUser['mark']}}</span>
						</div>
						<div class="col-xs-4">
							<label>居住地址：</label>
							<span>{{cUser['residenceProvinces']}}{{cUser['residenceCity']}}{{cUser['residenceAddress']}}</span>
						</div>
						<!--<div class="col-xs-4">-->
						<!--<label>邮箱：</label>-->
						<!--<span>18523565656</span>-->
						<!--</div>-->
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-4">
							<label>公司全称：</label>
							<span>{{cUser['companyName']}}</span>
						</div>
						<div class="col-xs-4">
							<label>公司地址：</label>
							<span>{{cUser['companyProvinces']}}{{cUser['companyCity']}}{{cUser['companyAddress']}}</span>
						</div>
						<div class="col-xs-4">
							<label>公司性质：</label>
							<span>{{cUser['companyNatureId']}}</span>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-4">
							<label>发薪方式：</label>
							<span>银行代发</span>
						</div>
						<div class="col-xs-4">
							<label>入职时间：</label>
							<span>{{cUser['entrytime']}}</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<label>直属亲戚联系人：</label>
							<span>{{cUser['immediateUsername']}} {{cUser['immediateRelationship']}} {{cUser['immediatePhone']}}</span>
						</div>
					</div>
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<label>其他联系人&emsp;&emsp;：</label>
							<span>{{cUser['otherUsername']}} {{cUser['otherRelationship']}} {{cUser['otherPhone']}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- /.content -->
</template>

<script type="text/ecmascript-6">
	import { mapGetters } from 'vuex'
	export default{
		data(){
			return {
				layer:{
					manage:'',
					check:''
				},
				cUser:{},
				//做过虑用的
				fUsers:[]
			}
		},
		computed:{
			...mapGetters([
				'orders',
			])
		},
		methods:{
			check(user){
				this.cUser=user;
				this.layer.check=layer.open({
					type: 1,
					area: ['900px','530px'],
					title: '用户信息',
					scrollbar: false,
					id: 'check',
					content:$('.layer_check_container'),
				})
			},
			search(){

			}
		},
		mounted(){
			this.$store.dispatch('fetchAllUserInfo').then((info)=>{
				this.fUsers=JSON.parse(JSON.stringify(info));
				console.obj(this.fUsers)
			})
			this.$nextTick(function () {
			})
		},
		beforeDestroy(){
			//用户使用输入路由跳页的时候
			layer.close(this.layer.manage);
			layer.close(this.layer.check);
		}
	}
</script>
<style>
	.info-box {
		cursor: pointer;
	}

	.info-box-content {
		text-align: center;
		vertical-align: middle;
		display: inherit;
	}

	.fullCanvas {
		width: 100%;
	}
</style>
